<template>
	<view class="list">
		<!-- 头像昵称 | 关注按钮 -->
		<view class="header">
			<view class="headerImage" @tap="openSpace">
				<image :src="item.userpic"></image>
				<view class="nicknameTime">
					<view class="nickname">{{item.username}}</view>
					<text class="time">{{item.newsTime}}</text>
				</view>
			</view>
			<!-- 右边的关注按钮 -->
			<view v-if="!item.follow" class="follow" hover-class="followAnimated" @click="follow">关注</view>
		</view>
		<!-- 标题啊 -->
		<view class="title" @click="openDetail(item)">{{item.title}}</view>
		<!-- 图片 -->
		<image class="images" v-if="item.titlepic" :src="item.titlepic" show-menu-by-longpress @click="openDetail(item)"></image>
		<!-- 图标按钮 -->
		<view class="iconButton">
			<!-- 顶 -->
			<view :class="item.support.type === 'support' ? 'supportActive': ''" hover-class="followAnimated fontMainColors"
			 @click="doSupport('support')">
				<text class="iconfont icon-dianzan"></text>
				<text>{{item.support.support_count > 0 ? item.support.support_count : "支持"}}</text>
			</view>
			<!-- 踩 -->
			<view :class="item.support.type === 'unsupport' ? 'supportActive': ''" hover-class="followAnimated fontMainColors"
			 @click="doSupport('unsupport')">
				<text class="iconfont icon-cai"></text>
				<text>{{item.support.unsupport_count > 0 ? item.support.unsupport_count : "反对"}}</text>
			</view>
			<!-- 留言 -->
			<view hover-class="followAnimated fontMainColors" @click="openDetail">
				<text class="iconfont icon-xiaoxi"></text>
				<text>{{item.comment_count > 0 ? item.comment_count : "评论"}}</text>
			</view>
			<!-- 分享 -->
			<view hover-class="followAnimated fontMainColors" @click="openDetail">
				<text class="iconfont icon-fenxiang_2"></text>
				<text>{{item.share_num > 0 ? item.share_num : "分享"}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			index: Number
		},
		methods: {
			// 打开个人空间
			openSpace() {
				uni.navigateTo({
					url: "../../user/space/space"
				})
			},
			// 关注
			follow() {
				// 通知父组件
				this.$emit("follow", this.index);
			},
			// 进入详情页面
			openDetail(item) {
				uni.navigateTo({
					url: `../../detail/detail?detail=${encodeURIComponent(JSON.stringify(item))}`,
				});
			},
			// 顶踩操作
			doSupport(type) {
				// 通知父组件
				this.$emit("doSupport", {
					type,
					index: this.index
				})
			},
		}
	}
</script>

<style lang="scss">
	.list {
		padding: 0 20rpx;
	}

	.header {
		@include flexBetweenCenter;
	}

	.headerImage {
		@include flexCenter;

		>image {
			width: 65rpx;
			height: 65rpx;
			border-radius: 50rpx;
			margin-right: 10rpx;
		}
	}

	.nicknameTime {
		.nickname {
			line-height: 1.2;
			font-size: 30rpx;
		}

		.time {
			font-size: 20rpx;
			color: #9D9589;
		}
	}

	.follow {
		width: 90rpx;
		height: 50rpx;
		@include flexCenterCenter;
		@include backgroundMainColor;
		border-radius: 5rpx;
		color: #FFFFFF;
	}

	.title {
		margin: 30rpx 0 20rpx 0;
	}

	.images {
		width: 100%;
		height: 350rpx;
		border-radius: 10rpx;
		margin: 10rpx 0;
	}

	.iconButton {
		@include flexCenter;

		>view {
			flex: 1;
			@include flexCenterCenter;

			>text {
				&:first-of-type {
					margin-right: 20rpx;
				}
			}
		}
	}

	// 关注动画特效
	.followAnimated {
		animation: jello;
		animation-duration: .5s;
	}

	// 点击颜色发生改变
	.fontMainColors {
		@include fontMainColor;
	}

	.supportActive {
		@include fontMainColor;
	}
</style>
